@extends('layouts.app')

@section('content')
<div class="index-container" style="margin-bottom:60px;">
	<div class="row clear"> 
        <div class="col-xs-12">
        	<!--carousel-->
        	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			  <!-- Wrapper for slides -->
			  <div class="carousel-inner" role="listbox">
			    <a href="#1" class="item active">
			     <img src="{{ asset('images/index/banner-03.png') }}" alt="..." style="margin:0 auto">
			     <div class="carousel-caption"></div>
			   </a>
			   <a href="#2" class="item">
			     <img src="{{ asset('images/index/banner-03.png') }}" alt="..." style="margin:0 auto">
			     <div class="carousel-caption"></div>
			   </a>
			  </div>
			  <!-- Controls -->
			  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right"></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
        	<!--carousel over-->
        </div>
        <div class="col-xs-12 index-title">
        	<a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1195552484&amp;site=qq&amp;menu=yes"><div class="col-xs-6 title-telK"><img src="{{ asset('images/index/tel.png') }}" alt="" class="telK-pic">联系客服</div></a>
        	<div class="col-xs-6 title-newZ"><img src="{{ asset('images/index/new.png') }}" alt="" class="telK-pic">新手指引</div>
        </div>
        <div class="col-xs-12 jiaoYBox" style="padding-left:0;padding-right:0">
        	<div class="jiaoY col-xs-6">实盘交易</div>
        </div>
        <!--期货列表-->
        <div class="index-listBox col-xs-12 bgWhite"  >
        	<div class="list-title borTopBot"><span class="col-xs-11">国际期货</span></div>

        	<div class="listBox clear"   id="indexVum">
        		<!-- <div class="list borderBottom clear">
	        		<a href="#">
	        			<div class="listSys fl"><img src="{{ asset('images/index/meiY.png') }}"alt="" width="35px"></div>
	        			<div class="list-intro verAlig fl">
	        				<div class="fl textLeft" style="padding-right:0;width:60%">
	        					<p class="list-tit">美原油</p>
	        					<p class="colAba fontSize12">波动活跃、每周都有EIA</p>
	        				</div>
		        			<div class="fr fontSize12" style="padding:0 0 0 10px;width:38%;">
		        				<p class="colGreen" style="margin:0"><span>50.23&nbsp;</span><span>-1.34%</span></p>
		        				<p class="colAba">07:00-凌晨06:00</p>
		        			</div>
	        			</div>
	        		</a>
        		</div>
        		<div class="list borderBottom clear">
	        		<a href="#">
	        			<div class="listSys fl"><img src="{{ asset('images/index/deZ.png') }}"alt="" width="35px"></div>
	        			<div class="list-intro verAlig fl">
	        				<div class="fl textLeft" style="padding-right:0;width:60%">
	        					<p class="list-tit">德指</p>
	        					<p class="colAba fontSize12">☆火爆德指波幅巨大、欧洲经济晴雨表</p>
	        				</div>
		        			<div class=" fr fontSize12" style="padding:0 0 0 10px;width:38%;" v-for="data in datas" >
		        				<p class="colRed" style="margin:0"  v-bind="@{{colRed}}"><span>@{{data.price}}11287&nbsp;</span><span>+0.34%</span></p>
		        				<p class="colAba">07:00-凌晨06:00</p>
		        			</div>
	        			</div>
	        		</a>
        		</div>
        		<div class="list borderBottom clear">
	        		<a href="#">
	        			<div class="listSys fl"><img src="{{ asset('images/index/meiH.png') }}"alt="" width="35px"></div>
	        			<div class="list-intro verAlig fl">
	        				<div class="fl textLeft" style="padding-right:0;width:60%">
	        					<p class="list-tit">美黄金</p>
	        					<p class="colAba fontSize12">火爆的非农行情，最佳避险资产</p>
	        				</div>
		        			<div class=" fr  fontSize12" style="padding:0 0 0 10px;width:38%;">
		        				<p class="colRed" style="margin:0"><span>11287&nbsp;</span><span>+0.34%</span></p>
		        				<p class="colAba">07:00-凌晨06:00</p>
		        			</div>
	        			</div>
	        		</a>
        		</div>
        		<div class="list borderBottom clear">
	        		<a href="#">
	        			<div class="listSys fl"><img src="{{ asset('images/index/xiaoN.png') }}"alt="" width="35px"></div>
	        			<div class="list-intro verAlig fl">
	        				<div class="fl textLeft" style="padding-right:0;width:60%">
	        					<p class="list-tit">小钠指</p>
	        					<p class="colAba fontSize12">小型纳斯达克指数</p>
	        				</div>
		        			<div class=" fr  fontSize12" style="padding:0 0 0 10px;width:38%;">
		        				<p class="colRed" style="margin:0"><span>11287&nbsp;</span><span>+0.34%</span></p>
		        				<p class="colAba">07:00-凌晨06:00</p>
		        			</div>
	        			</div>
	        		</a>
        		</div>
        		<div class="list borderBottom clear">
	        		<a href="#">
	        			<div class="listSys fl"><img src="{{ asset('images/index/hengZ.png') }}"alt="" width="35px"></div>
	        			<div class="list-intro verAlig fl">
	        				<div class="fl textLeft" style="padding-right:0;width:60%">
	        					<p class="list-tit">恒指</p>
	        					<p class="colAba fontSize12">1500元就能玩恒指</p>
	        				</div>
		        			<div class=" fr  fontSize12" style="padding:0 0 0 10px;width:38%;">
		        				<p class="colRed" style="margin:0"><span>11287&nbsp;</span><span>+0.34%</span></p>
		        				<p class="colAba">07:00-凌晨06:00</p>
		        			</div>
	        			</div>
	        		</a>
        		</div> -->
        		<div class="list borderBottom clear" v-for="item in items">
	        		<a :href="item.href">
	        			<div class="listSys fl"><img :src="item.imgP" alt="" width="35px"></div>
	        			<div class="list-intro fl">
	        				<div class="fl textLeft" style="padding-right:0;width:60%;">
	        					<p class="list-tit">@{{item.listName}}</p>
	        					<p class="colAba fontSize12">@{{ item.listInfo }}</p>
	        				</div>
		        			<div class=" fl fontSize12 textRight" style="width:34%;">
		        				<p style="margin:0" v-bind:class="{ 'colRed':item.zdl>0?true:false,'colGreen':item.zdl>0?false :true}">
		        					<span>@{{ item.openPrice }}&nbsp;</span>
		        					<span>@{{ item.zdl | percent }}</span>
		        				</p>
		        				<p class="colAba">@{{item.startTime}}</p>
		        			</div>
	        			</div>
	        		</a>
        		</div>
        	</div>
        </div>
    </div>

</div>
<script>
	var uio=[@foreach($options as $option)
			{
				href:"{{ url('/option',['symbol'=>$option->code]) }}",
				imgP:"{{ $option->icon }}",
				listName:"{{ $option->name }}",
				listInfo:"{{ $option->description }}",
				startTime:"{{ $option->timesdescription }}",
				openPrice:"",
				zdl:""
			},
			@endforeach]

$(function(){
	
	var vum = new Vue({
		el:"#indexVum",
		data:{
			items:uio
		},
		methods:{
			getRefresh:function(){
				$.ajax({
					type:"get",
					async:"jsonP",
					url:"{{ url('/getalldata') }}",
					success:function(data){
						var zdl ="";//涨跌率
						var back=JSON.parse(data);
						for(var i in back.datas){
							vum.items[i].openPrice = back.datas[i].buy_price;
							vum.items[i].zdl = ((back.datas[i].last_price-back.datas[i].open_price)/back.datas[i].open_price*100).toFixed(2);
						}
					}
				})
			}
		}
	});
	Vue.filter('percent', function (value) {
		return value+"%";
	})
	setInterval(function(){
		vum.getRefresh()
	},2000)
})
</script>
@endsection
@section('footer')
<!--footer-->
<div class="footerBox">
    <a href="{{ url('/home') }}" class="footerItem footerItem-cur"><img src="{{ asset('images/index/icon01-cur.png') }}" alt="" class="footer-icon"><br>首页</a>
    <a href="{{ url('/chat') }}" class="footerItem"><img src="{{ asset('images/index/icon02.png') }}" alt="" class="footer-icon"><br>互动</a>
    <a href="{{ url('/get_article') }}" class="footerItem"><img src="{{ asset('images/index/icon04.png') }}" alt="" class="footer-icon"><br>资讯</a>
    <a href="{{ url('/userinfo') }}" class="footerItem "><img src="{{ asset('images/index/icon03.png') }}" alt="" class="footer-icon"><br>我的</a>
</div>
 @show